<template>
  <div style="padding:30px;">
    <el-card shadow="never">
      <div slot="header">
        <el-button type="primary" size="mini" @click="showModal('')">新增</el-button>
      </div>
      <el-table :data="addressList" border stripe>
        <el-table-column
          fixed="left"
          label="#"
          width="50"
          type="index"
        />
        <el-table-column
          label="地址名称"
          width="200"
          prop="addressName"
          align="center"
        />
        <el-table-column
          label="默认发货地址"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <span style="margin-right:5px;">默认发货地址</span>
            <!-- sendStatus (integer, optional): 默认发货地址：0->否；1->是 -->
            <el-switch v-model="scope.row.sendStatus" :active-value="1" :inactive-value="0" @change="setSendAddress(scope.row.id)" />
          </template>
        </el-table-column>
        <el-table-column
          label="收货人姓名"
          width="100"
          prop="name"
          align="center"
        />
        <el-table-column
          label="收货人电话"
          width="200"
          prop="phone"
          align="center"
        />
        <el-table-column
          label="收货人地址"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.province+scope.row.city+scope.row.region+scope.row.detailAddress }}
          </template>
        </el-table-column>
        <el-table-column
          label="默认收货地址"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <span style="margin-right:5px;">默认收货地址</span>
            <!-- receiveStatus (integer, optional): 是否默认收货地址：0->否；1->是 , -->
            <el-switch v-model="scope.row.receiveStatus" :active-value="1" :inactive-value="0" @change="setDefaultReceive(scope.row.id)" />
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="200"
          prop="createTime"
          align="center"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="showModal(scope.row.id)"><i style="margin-right:5px;" class="el-icon-view" />编辑</el-button>
            <el-button type="text" size="mini" style="color:red;" @click="deleteAddress(scope.row.id)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <addressDialog ref="dialog" @refresList="getAddressList" />
  </div>
</template>

<script>
import addressDialog from '@/views/order/address/addressDialog'
import {
  addressList as addressListApi,
  companyAddress as companyAddressApi,
  setSendOne as setSendOneApi,
  setReceiveOne as setReceiveOneApi
} from '@/api/order/address/index'
export default {
  name: 'OrderAddress',
  components: {
    addressDialog
  },
  data() {
    return {
      addressList: []// 地址列表
    }
  },
  created() {
    this.getAddressList()
  },
  methods: {
    // 设置默认收货地址
    setDefaultReceive(id) {
      setReceiveOneApi({ id: id })
        .then(res => {
          const { success, message } = res
          if (success) {
            this.getAddressList()
            this.$message.success('修改默认状态成功')
          } else {
            this.$message.error(message)
          }
        })
    },
    // 设置默认发货地址
    setSendAddress(id) {
      setSendOneApi({ id: id })
        .then(res => {
          const { success, message } = res
          if (success) {
            this.getAddressList()
            this.$message.success('修改默认状态成功')
          } else {
            this.$message.error(message)
          }
        })
    },
    // 打开地址详情模态框
    showModal(addressId) {
      this.$refs.dialog.showModal(addressId)
    },
    // 删除地址
    deleteAddress(id) {
      companyAddressApi(id)
        .then(res => {
          this.getAddressList()
        })
    },
    // 获取地址列表
    getAddressList() {
      addressListApi()
        .then(res => {
          const { message, data, success } = res
          if (success) {
            this.addressList = data.items
          } else {
            this.$message.error(message)
          }
        })
    }
  }
}
</script>

<style>

</style>
